<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hystrix Dashboard</title>

	<!-- Our custom CSS -->
	<link rel="stylesheet" type="text/css" href="./index.css" />

	<!-- Javascript to monitor and display -->
	<script src="./js/jquery.min.js" type="text/javascript"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

	<script>
		var streams = [];
		function addStream () {
			if ($('#stream').val().length > 0) {
				var s = {
					name: $('#title').val(),
					stream: $('#stream').val(),
					auth: $('#authorization').val(),
					delay: $('#delay').val()
				};

				streams.push(s);
				$('#streams').html('<table>' + _.reduce(streams, function(html, s) {
                            return html + '<tr><td>' + _.escape(s.name) + '</td><td>' + _.escape(s.stream) + '</td> <td><a href="#" onclick="removeStream(this);">Remove</a></td> </tr>';
				}, '') + '</table>');

				$('#message').html("");
			} else {
				$('#message').html("The 'stream' value is required.");
			}
		}

		function monitorStreams () {
			if (streams.length) {
				location.href = './monitor/monitor.html?streams=' + encodeURIComponent(JSON.stringify(streams));
			} else {
				$('#message').html("Add Streams to monitor, before starting to monitor.");
			}
		}

		var mapInstanceToOption = function (instance) {
			var ipAddr = $(instance).find("ipAddr")[0].innerHTML;
			var port = $(instance).find("port")[0].innerHTML;
			var appName = $(instance).find("app")[0].innerHTML;

			return '<option value="' + ipAddr + ':' + port + '" data-appname="' + appName + '">' + appName + ' on ' + ipAddr + '</option>';
		};

		var updateStreamUrlForEurekaApp = function (evt) {
			var $this = $('#eurekaApp'),
					$value = $this.val();

			if ($this.find("option:selected").is(':disabled')) {
				return;
			}

			var appName = $this.find("option:selected").data("appname");

			var streamType = $('input[name=streamType]:checked').val();
			$('#stream').val("http://" + $value + "/" + streamType + "?cluster=default");
			$("#title").val(appName);
		};

		var removeStream = function(element) {
		    var $tr = $(element).closest("tr");
            var url = $tr.find("td:nth-child(2)").text();

            for (var i = 0; i < streams.length; i++) {
                if(streams[i].stream === url) {
                    streams.splice(i, 1);
                    break;
                }
            }

            $tr.remove();
        };

		var fetchEurekaAppList = function (e) {
			var url = window.location.pathname + "eureka?url=" + $('#eurekaURL').val();
			var $eurekaApp = $('#eurekaApp');

			$.get(url, function (data) {
				$eurekaApp.html('<option selected disabled>Choose here</option>'); // clear options

				var optionsByApp = _($(data).find("application")).chain()
																 .map(function (application) {
																	 return $(application).find("instance")[0];
																 })
																 .map(mapInstanceToOption)
																 .reduce(function (html, option) { return html + option; })
																 .value();

				var optionsByInstances = _($(data).find("application")).chain()
																	   .map(function (application) {
																		   var appName = $(application).find("name")[0].innerHTML;
																		   var appInstances = $(application).find("instance");
																		   var optionsForInstances = _($(appInstances)).chain()
																													   .map(mapInstanceToOption)
																													   .reduce(function (html, option) {return html + option;})
																													   .value();

																		   return '<optgroup label="' + appName + '">' + optionsForInstances + '</optgroup>';
																	   })
																	   .reduce(function (html, opt) { return html + opt; })
																	   .value();

				var allOptions = '<optgroup label="Applications">' + optionsByApp + "</optgroup>" + optionsByInstances;

				$eurekaApp.html(allOptions);
				updateStreamUrlForEurekaApp();
			});
		};

		$(document).ready(function () {
			$('#stream').keypress(function (e) {
				if (e.which == 13) {
					monitorStreams();
				}
			});

			$('#eurekaURL').on('input', fetchEurekaAppList);

			// setup handlers for selecting an application
			$("#eurekaApp").on('change click', updateStreamUrlForEurekaApp);

			// setup handler for stream type changing
			$("[name='streamType']").on('change', updateStreamUrlForEurekaApp);
		});
	</script>
</head>
<body>
<div style="width:800px;margin:0 auto;">

	<center>
	<img width="264" height="233" src="./images/hystrix-logo.png">
	<br>
	<br>

	<h2>Hystrix Dashboard</h2>

	Eureka URL: <input id="eurekaURL" name="eurekaURL" class="eurekaURL" type="text" size="42" placeholder="http://hostname:8080/eureka/v2/apps"> <br>

	Eureka Application:
	<select id="eurekaApp" name="eurekaApp" class="eurekaApp">
		<option selected disabled>Choose here</option>
	</select>

	Stream Type:
	Hystrix <input type="radio" name="streamType" value="hystrix.stream" checked>
	Turbine <input type="radio" name="streamType" value="turbine.stream"> <br><br>

	<input id="stream" type="textfield" size="120" placeholder="http://hostname:port/turbine/turbine.stream" value="http://127.0.0.1:8080/hystrix/hystrix.stream"></input>
	<br><br>
	<i>Cluster via Turbine (default cluster):</i> http://turbine-hostname:port/turbine.stream
	<br>
	<i>Cluster via Turbine (custom cluster):</i> http://turbine-hostname:port/turbine.stream?cluster=[clusterName]
	<br>
	<i>Single Hystrix App:</i> http://hystrix-app:port/hystrix.stream
	<br><br>
	Delay: <input id="delay" type="textfield" size="10" placeholder="2000"></input>ms
	&nbsp;&nbsp;&nbsp;&nbsp;
	Title: <input id="title" type="textfield" size="60" placeholder="Example Hystrix App"></input><br><br>
    Authorization: <input id="authorization" type="textfield" size="60" placeholder="Basic Zm9vOmJhcg=="></input><br>
	<br>
	<button onclick="addStream()">Add Stream</button>
	<br><br>
	<ol id='streams'></ol>
	<br><br>
	<button onclick="monitorStreams()">Monitor Streams</button>
	<br><br>
	<div id="message" style="color:red"></div>

	</center>
</div>
</body>
</html>
